<template>
  <div>
    <el-container>
      <el-header>欢迎，管理员!</el-header>
      <el-main>
        <el-tabs tab-position="left">
          <!-- 课程管理栏 -->
          <el-tab-pane label="课程管理">
            <el-form :inline="true" :model="addStuForm">
              <el-form-item label="课程ID">
                <el-input
                  v-model="addStuForm.courseId"
                  placeholder="请输入课程ID"
                ></el-input>
              </el-form-item>
              <el-form-item label="学生ID">
                <el-input
                  v-model="addStuForm.stuID"
                  placeholder="请输入学生ID"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addSubmit">
                  添加学生至教学班
                </el-button>
              </el-form-item>
            </el-form>

            <el-button @click="addFormVisible = true">添加课程</el-button>
            <el-button @click="addTeaCrsFormVisible = true"
              >添加教学班</el-button
            >
            <!-- 添加课程对话框表单 -->
            <el-dialog title="添加课程" :visible.sync="addFormVisible">
              <el-form :model="addForm">
                <el-form-item label="课程名称" required prop="name">
                  <el-input
                    v-model="addForm.name"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="课程ID" required prop="id">
                  <el-input v-model="addForm.id" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="院系" required prop="college">
                  <el-input
                    v-model="addForm.college"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="学分" required prop="credit">
                  <el-input
                    v-model="addForm.credit"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="课程简介" required prop="introduction">
                  <el-input
                    v-model="addForm.introduction"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCourseSubmit()"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 添加教学班对话框表单 -->
            <el-dialog title="添加教学班" :visible.sync="addTeaCrsFormVisible">
              <el-form :model="addForm">
                <el-form-item label="教学班ID" required prop="courseId">
                  <el-input
                    v-model="addForm.courseId"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="课程ID" required prop="course_id">
                  <el-input v-model="addForm.course_id"></el-input>
                </el-form-item>
                <el-form-item label="教师工号" required prop="teacher_id">
                  <el-input v-model="addForm.teacher_id"></el-input>
                </el-form-item>
                <el-form-item label="教师名" required prop="teacher_name">
                  <el-input v-model="addForm.teacher_name"></el-input>
                </el-form-item>
                <el-form-item label="课程状态" required prop="stat">
                  <el-input v-model="addForm.stat"></el-input>
                </el-form-item>
                <el-form-item label="学年" required prop="year">
                  <el-input v-model="addForm.year"></el-input>
                </el-form-item>
                <el-form-item label="学期" required prop="semester">
                  <el-input v-model="addForm.semester"></el-input>
                </el-form-item>
                <el-form-item label="上课时间" required prop="schedule">
                  <el-input v-model="addForm.schedule"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addTeaCrsFormVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="addTeaCrsSubmit = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 修改课程信息表单 -->
            <el-dialog
              title="修改信息表单"
              :visible.sync="modifyCourseFormVisable"
            >
              <el-form :model="modiCourseForm">
                <el-form-item label="课程简介">
                  <el-input
                    v-model="modiCourseForm.des"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="modifyCourseFormVisable = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="handleModifyCourse()"
                  >确 定</el-button
                >
              </div>
            </el-dialog>

            <!-- 课程列表 -->
            <el-row><h4>课程列表</h4></el-row>
            <el-table
              :data="courseTable"
              style="margin-left: 30px; margin-top: 20px; width: 95%"
              max-height="500"
            >
              <!-- 展开详情 课程描述 -->
              <el-table-column type="expand" fixed="left">
                <template slot-scope="props">
                  <el-form label-position="left">
                    <el-form-item label="课程描述：">
                      <span>{{ props.row.introduction }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <!-- 课程名 -->
              <el-table-column
                label=" 课程名"
                width="180"
                sortable
                prop="course_name"
              >
              </el-table-column>
              <!-- 课程号 -->
              <el-table-column
                label="课程号"
                width="100"
                sortable
                prop="course_id"
              >
              </el-table-column>
              <!-- 开课专业 -->
              <el-table-column label="开课专业" width="180" prop="college">
              </el-table-column>
              <el-table-column label="学分" width="100" prop="credits">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="
                      modifyCourseFormVisable = true;
                      choosenId = scope.row.course_id;
                      index = scope.$index;
                    "
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteCourse(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <!-- 教学班列表 -->
            <el-row><h4>教学班列表</h4></el-row>
            <el-table
              :data="teachCrsTable"
              style="margin-left: 30px; margin-top: 20px; width: 95%"
              max-height="500"
            >
              <!-- 展开详情 课程描述 -->
              <el-table-column type="expand" fixed="left">
                <template slot-scope="props">
                  <el-form label-position="left">
                    <el-form-item label="课程描述：">
                      <span>{{ props.row.introduction }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <!-- 课程名 -->
              <el-table-column
                label=" 课程名"
                width="180"
                sortable
                prop="course_name"
              >
              </el-table-column>
              <!-- 课程号 -->
              <el-table-column
                label="教学班号"
                width="100"
                sortable
                prop="courseId"
              >
              </el-table-column>
              <!-- 开课专业 -->
              <el-table-column label="授课教师" width="180" prop="teacher_name">
              </el-table-column>
              <el-table-column label="课程时间" width="180" prop="credits">
                <template slot-scope="scope">
                  {{ $global.mapSchedule(scope.row.schedule) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteClass(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 账号管理栏 -->
          <el-tab-pane label="账号管理">
            <el-row><h4>教师账号管理</h4></el-row>
            <el-button @click="addTeacherVisable = true">
              添加教师账号
            </el-button>
            <!-- 添加教师账号表单 -->
            <el-dialog title="添加教师账号" :visible.sync="addTeacherVisable">
              <el-form :model="addForm">
                <el-form-item label="教师工号" required prop="teacherId">
                  <el-input
                    v-model="addForm.teacherId"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="教师姓名" required prop="name">
                  <el-input
                    v-model="addForm.name"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="院系" required prop="college">
                  <el-input v-model="addForm.college"></el-input>
                </el-form-item>
                <el-form-item label="教师简介" required prop="teacherProfile">
                  <el-input
                    v-model="addForm.teacherProfile"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址" required prop="email">
                  <el-input
                    v-model="addForm.email"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="电话号码" required prop="telephone">
                  <el-input
                    v-model="addForm.telephone"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addTeacherVisable = false">取 消</el-button>
                <el-button type="primary" @click="addTeacherSubmit()"
                  >确 定</el-button
                >
              </div>
            </el-dialog>

            <!-- 教师账号列表 -->
            <el-table
              :data="teacherTable"
              style="margin-left: 30px; margin-top: 20px; width: 95%"
              max-height="500"
            >
              <!-- 展开详情 教师简介 -->
              <el-table-column type="expand" fixed="left">
                <template slot-scope="props">
                  <el-form label-position="left">
                    <el-form-item label="教师简介：">
                      <span>{{ props.row.teacherProfile }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <!-- 教师姓名 -->
              <el-table-column
                label="教师姓名"
                width="100"
                sortable
                prop="name"
              >
              </el-table-column>
              <!-- 教师工号 -->
              <el-table-column
                label="教师工号"
                width="150"
                sortable
                prop="teacherId"
              >
              </el-table-column>
              <!-- 联系方式 -->
              <el-table-column label="联系方式" width="220">
                <template slot-scope="scope">
                  <el-row>Email: {{ scope.row.email }}</el-row>
                  <el-row>电话: {{ scope.row.telephone }}</el-row>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteTeacher(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-row><h4>学生账号管理</h4></el-row>

            <el-button @click="addStudentVisable = true">
              添加学生账号
            </el-button>
            <!-- 添加学生账号表单 -->
            <el-dialog title="添加教师账号" :visible.sync="addStudentVisable">
              <el-form :model="addForm">
                <el-form-item label="学生学号" required prop="studentId">
                  <el-input
                    v-model="addForm.studentId"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="学生姓名" required prop="name">
                  <el-input
                    v-model="addForm.name"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="院系" required prop="college">
                  <el-input v-model="addForm.college"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址" required prop="email">
                  <el-input
                    v-model="addForm.email"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="电话号码" required prop="telephone">
                  <el-input
                    v-model="addForm.telephone"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="学生班级" required prop="studentClass">
                  <el-input v-model="addForm.studentClass"></el-input>
                </el-form-item>
                <el-form-item label="主修专业" required prop="major">
                  <el-input v-model="addForm.major"></el-input>
                </el-form-item>
                <el-form-item label="学生类型" required prop="studentType">
                  <el-input v-model="addForm.studentType"></el-input>
                </el-form-item>
                <el-form-item label="入学年份" required prop="enrollmentYear">
                  <el-input v-model="addForm.enrollmentYear"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addStudentVisable = false">取 消</el-button>
                <el-button type="primary" @click="addStudentSubmit()"
                  >确 定</el-button
                >
              </div>
            </el-dialog>

            <!-- 学生账号列表 -->
            <el-table
              :data="studentTable"
              style="margin-left: 30px; margin-top: 20px; width: 95%"
              max-height="500"
            >
              <!-- 展开详情 联系方式 -->
              <el-table-column type="expand" fixed="left">
                <template slot-scope="props">
                  <el-row>Email: {{ props.row.email }}</el-row>
                  <el-row>电话: {{ props.row.telephone }}</el-row>
                </template>
              </el-table-column>
              <!-- 学生姓名 -->
              <el-table-column
                label="学生姓名"
                width="100"
                sortable
                prop="studentName"
              >
              </el-table-column>
              <!-- 学生学号 -->
              <el-table-column
                label="学生学号"
                width="150"
                sortable
                prop="studentId"
              >
              </el-table-column>
              <!-- 学院 -->
              <el-table-column label="学院" width="180" sortable prop="college">
              </el-table-column>
              <!-- 专业 -->
              <el-table-column label="专业" width="180" sortable prop="major">
              </el-table-column>
              <!-- 班级 -->
              <el-table-column
                label="班级"
                width="180"
                sortable
                prop="studentClass"
              >
              </el-table-column>
              <!-- 入学年份 -->
              <el-table-column
                label="入学年份"
                width="180"
                sortable
                prop="enrollmentYear"
              >
              </el-table-column>
              <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteStudent(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import VueCookies from "vue-cookies";
import axios from "axios";
import qs from "qs";
import global from "../lib/global";

export default {
  name: "Admin",
  /**
   * 防止强制输入路由路径访问
   */
  beforeRouteEnter(from, to, next) {
    if (to.name != null) {
      // 当不是强制路由，而是由页面跳转来时，允许跳转
      next();
    } else {
      // 否则进行检查
      if (
        VueCookies.get("role") !== "admin" &&
        VueCookies.get("role") !== "test"
      ) {
        next("/");
      } else {
        next();
      }
    }
  },
  data() {
    return {
      addFormVisible: false,
      modifyCourseFormVisable: false,
      addTeaCrsFormVisible: false,
      addTeacherVisable: false,
      addStudentVisable: false,
      choosenId: 0,
      index: 0,
      addForm: {},
      modiCourseForm: {},
      addStuForm: {
        courseId: "",
        stuID: "",
      },
      courseTable: [],
      teachCrsTable: [],
      teacherTable: [],
      studentTable: [],
    };
  },
  mounted() {
    axios
      .post("/api/getAllCourses")
      .then((res) => {
        // console.log("res", res);
        this.courseTable = res.data.courseList;
        // console.log("courseTable", this.courseTable);
        this.courseTable.forEach((course) => {
          // console.log("id", course.course_id);
          axios
            .post(
              "/api/getAllClassesByCourseId",
              qs.stringify({ course_id: course.course_id })
            )
            .then((res) => {
              // console.log("教学班", res.data.classInfo);
              var list = res.data.classInfo;
              // console.log("infolist", list);
              if (list != null) {
                list.forEach((info) => {
                  this.teachCrsTable.push(info);
                });
              }
            })
            .catch((err) => {});
        });
        // console.log("list", this.teachCrsTable);
      })
      .catch((err) => {
        // console.log("err", err);
      });

    axios
      .post("/api/getAllTeachers")
      .then((res) => {
        console.log("教师列表", res);
        this.teacherTable = res.data.teacherList;
      })
      .catch((err) => {
        console.log(err);
      });

    axios
      .post("/api/getAllStudents")
      .then((res) => {
        this.studentTable = res.data.studentList;
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    addSubmit() {
      console.log("submit!", this.addStuForm);
      axios
        .post(
          "/api/addStudentIntoClass",
          qs.stringify({
            courseId: this.addStuForm.courseId,
            studentId: this.addStuForm.stuID,
          })
        )
        .then((res) => {
          console.log("res", res);
          this.addStuForm.courseId = "";
          this.addStuForm.stuID = "";
          this.$message.success(res.data.message);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    handleModifyCourse() {
      axios
        .post(
          "/api/setCourseIntroductionById",
          qs.stringify({
            course_id: this.choosenId,
            newIntroduction: this.modiCourseForm.des,
          })
        )
        .then((res) => {
          console.log("res", res);
          this.$message.success(res.data.message);
          this.courseTable[this.index].introduction = this.modiCourseForm.des;
        });
      // console.log(this.choosenId);
      this.modifyCourseFormVisable = false;
    },
    deleteCourse(index, row) {
      // 删除课程
      axios
        .post("/api/deleteCourse", qs.stringify({ courseId: row.course_id }))
        .then((res) => {
          this.$message.success(res.data.message);
        });
    },
    addCourseSubmit() {
      // 添加课程
      axios
        .post(
          "/api/addCourse",
          qs.stringify({
            course_id: this.addForm.id,
            course_name: this.addForm.name,
            college: this.addForm.college,
            credits: this.addForm.credit,
            introduction: this.addForm.introduction,
          })
        )
        .then((res) => {
          this.$message.success(res.data.message);
        });
      this.addFormVisible = false;
    },
    addTeaCrsSubmit() {
      axios
        .post(
          "/api/addClass",
          qs.stringify({
            courseId: this.addForm.courseId,
            course_id: this.addForm.course_id,
            teacher_id: this.addForm.teacher_id,
            teacher_name: this.addForm.teacher_name,
            stat: this.addForm.stat,
            year: this.addForm.year,
            semester: this.addForm.semester,
            schedule: this.addForm.schedule,
          })
        )
        .then((res) => {
          this.$message.success(res.data.message);
        });
      this.addTeaCrsFormVisible = false;
    },
    deleteClass(index, row) {
      axios
        .post(
          "/api/deleteClass",
          qs.stringify({
            classId: row.CourseId,
          })
        )
        .then((res) => {
          this.$message.success(res.data.message);
        });
    },
    addTeacherSubmit() {
      axios
        .post(
          "/api/addTeacher",
          qs.stringify({
            teacherId: this.addForm.teacherId,
            name: this.addForm.name,
            college: this.addForm.college,
            teacherProfile: this.addForm.teacherProfile,
            email: this.addForm.email,
            telephone: this.addForm.telephone,
          })
        )
        .then((res) => {
          this.$message.success(res.data.message);
        });
      this.addTeacherVisable = false;
    },
    deleteTeacher(index, row) {
      axios
        .post("/api/deleteTeacher", qs.stringify({ teacherId: row.teacherId }))
        .then((res) => {
          this.$message.success(res.data.message);
        });
    },
    addStudentSubmit() {
      axios
        .post(
          "/api/addStudent",
          qs.stringify({
            studentId: this.addForm.studentId,
            college: this.addForm.college,
            name: this.addForm.name,
            email: this.addForm.email,
            telephone: this.addForm.telephone,
            studentClass: this.addForm.studentClass,
            major: this.addForm.major,
            studentType: this.addForm.studentType,
            enrollmentYear: this.addForm.enrollmentYear,
          })
        )
        .then((res) => {
          this.$message.success(res.data.message);
        })
        .catch((err) => {
          console.log(err);
        });
      this.addStudentVisable = false;
    },
    deleteStudent(index, row) {
      axios
        .post("/api/deleteStudent", qs.stringify({ studentId: row.studentId }))
        .then((res) => {
          this.$message.success(res.data.message);
        });
    },
  },
};
</script>

<style scoped>
</style>
